<%@page import="com.gao.domain.Product"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
		<!--引入Bootstrap资源-->
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="css/bootstrap-theme.css">
		<link rel="stylesheet" href="css/index.css" />
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery-1.11.3.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.js"></script>
	</head>
	<body>
		<!--top bar制作-->
		<nav class="navbar navbar-default" role="navigation">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		     <!-- <a class="navbar-brand" href="#"><img src="img/logo.png" height="30px"/></a>-->
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="ProductsIndexServlet">小米商城</a></li>
		        <li><a href="#">米聊</a></li>
		        <li><a href="#">游戏</a></li>
		        <li><a href="#">多看阅读</a></li>
		        <li><a href="#">云服务</a></li>
		        <li><a href="#">米聊</a></li>
		      </ul>
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="login.jsp">登录</a></li>
		        <li><a href="register.jsp">注册</a></li>
		        <li><a href="#">消息通知</a></li>
		        <li><a href="CartDetailServlet">购物车</a></li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		<!--导航制作-->
		<div class="row">
		  <div class="col-md-1 col-md-offset-2">
		  	<a href="ProductsIndexServlet"><img src="img/logo.png"/> </a>
		  </div>
		  <div class="col-md-5">
		  	<!--<div class="row">
			  <div class="col-md-1">小米手机</div>
			  <div class="col-md-1">红米 </div>
			  <div class="col-md-1">平板</div>
			  <div class="col-md-1">笔记本</div>
			  <div class="col-md-1">电视</div>
			  <div class="col-md-1">盒子</div>
			  <div class="col-md-1">影音</div>
			  <div class="col-md-1">路由器</div>
			  <div class="col-md-4"></div>
			</div>			  	-->
			<ul class="nav navbar-nav">
		        <li class="active"><a href="#">小米手机</a></li>
		        <li><a href="#">红米</a></li>
		        <li><a href="#">平板</a></li>
		        <li><a href="#">笔记本</a></li>
		        <li><a href="#">电视</a></li>
		        <li><a href="#">盒子</a></li>
		        <li><a href="#">影音</a></li>
		      </ul>
		  </div>
		  <div class="col-md-2">
		  	<div class="input-group">
			  <input type="text" class="form-control">
			  <span class="input-group-addon">搜索</span>
			</div>
		  </div>
		</div>
		<!--轮播图-->
		<div class="ban">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <!-- Indicators -->
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			  </ol>
			
			  <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="img/ad_banner01.jpg" alt="..." width="100%">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="img/ad_banner02.jpg" alt="..." width="100%">
			      <div class="carousel-caption"> 
			      </div>
			    </div>
			    <div class="item">
			      <img src="img/ad_banner03.jpg" alt="..." width="100%">
			      <div class="carousel-caption">
			      </div>
			    </div>
			  </div>
			
			  <!-- Controls -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-http://127.0.0.1:8020/demo1/%E6%A1%88%E4%BE%8B3-%E8%BD%AE%E6%92%AD.html#carousel-example-genericslide="prev">
			    <span class="glyphicon glyphicon-chevron-left"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
		<!--标题-->
		<div class="title">
			<h3>产品信息</h3>
		</div>
		<!--产品信息-->
		<div class="row product">
		 <div class="col-md-8 col-md-offset-2">
		  	<div class="row text-center">
			<% List<Product> products = (List<Product>)request.getAttribute("products"); %>
			<% for(Product product:products){ %>
				  <a href="ProductDetailServlet?id=<%=product.getPid() %>">
					  <div class="col-md-2">
					  	<img src="img/product/<%=product.getImg() %>" />
			        		<p class="name"><%=product.getName() %></p>
			        		<p class="desc"><%=product.getDesc() %></p>
			        		<p class="price">￥<%=product.getPrice() %>元</p>
					  </div>
				  </a>
			<% } %>
			</div>
		</div>
		</div>
		</div>
		<!--底部设置-->
		<hr />
		<div class="row">
		  <div class="col-md-6 col-md-offset-3">
		  	<div class="row">
			  <div class="col-md-2 col-md-offset-1">预约维修服务</div>
			  <div class="col-md-2">7天无理由退货</div>
			  <div class="col-md-2">15天免费换货</div>
			  <div class="col-md-2">520余家售后网点</div>
			  <div class="col-md-2 ">满150元包邮</div>
			</div>
		  </div>
		</div>
	</body>
</html>
